<template>
  <div class="order-review-list">
    <el-card>
      <div slot="header" class="clearfix">
        <span>订单评价列表</span>
      </div>
      <el-table :data="reviewList" style="width: 100%" v-loading="loading">
        <el-table-column prop="avatar" label="头像" width="80">
          <template #default="scope">
            <el-image :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"
              style="width:40px;height:40px;border-radius:50%" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户昵称" width="120" />
        <el-table-column prop="name" label="员工姓名" width="120" />
        <el-table-column prop="rating" label="评分" width="150">
          <template #default="scope">
            <el-rate
              v-model="scope.row.rating"
              disabled
              :show-score="false"
            />
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评价内容" />
        <el-table-column prop="pictures" label="图片" width="120">
          <template #default="scope">
            <el-image v-if="scope.row.pictures" :src="scope.row.pictures" :preview-src-list="[scope.row.pictures]"
              style="width:60px;height:60px" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column prop="isAnonymous" label="匿名" width="80">
          <template #default="scope">
            <el-tag :type="scope.row.isAnonymous === 1 ? 'info' : 'success'">
              {{ scope.row.isAnonymous === 1 ? '匿名' : '实名' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column prop="state" label="状态" width="80">
          <template #default="scope">
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :total="total"
        :page-size="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @current-change="getList"
        style="margin-top: 20px; text-align: right;"
      />
    </el-card>
  </div>
</template>

<script>
import { listOrderReviews } from '@/api/servicemanage/comments'

export default {
  name: 'OrderReviewList',
  data() {
    return {
      reviewList: [],
      total: 0,
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listOrderReviews(this.queryParams).then(res => {
        console.log('接口返回 rows:', res.rows)
        this.reviewList = res.rows || []
        this.total = res.total || 0
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.order-review-list {
  padding: 20px;
}
</style>
